<template>
	<div class="mall_goods_detail_nav" :class="{'on' : isShow}">
		<div class="mall_goods_detail_nav_item">
			<a @click="goBack($event)" class="mall_goods_detail_nav_goback"><i class="icon-uniE90B"></i></a>
		</div>
		<div class="mall_goods_detail_nav_item goods_title">{{title}}</div>
		<div class="mall_goods_detail_nav_item">
			<a @click="goToCart($event)" class="mall_goods_detail_nav_cart"><i class="icon-uniE907"></i></a>
		</div>
	</div>
</template>
<script>
	export default{
		name: "GoodsDetailNav",
		props:["title"],
		data: function(){
			return{
				isShow: false
			}
		},
		beforeRouteUpdate(to, from, next){
			console.log(arguments)
		},
		methods:{
			goBack(e){
				this.$router.go(-1)
			},
			goToCart(e){

			},
			_scrollHandler(){
				let top = getScrollTop();
				if (top > 100){
					this.$set(this, "isShow", true);
				}else{
					this.$set(this, "isShow", false);
				}
			}
		},
		mounted: function(){
			let that = this;
			that.throttleload = throttle(() => {
				that._scrollHandler()
			}, 100);
			window.addEventListener('scroll', that.throttleload);
		},
		destroyed: function(){
			let that = this;
			window.removeEventListener('scroll', that.throttleload);
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.mall_goods_detail_nav{
		&.on{
			background-color: #fff;
			border-bottom:1/@base solid #efefef;
			div{
				&.mall_goods_detail_nav_item{
					a{
						&.mall_goods_detail_nav_goback{
							background-color: #fff;
							i{
								color:#000;
							}
						}
						&.mall_goods_detail_nav_cart{
							background-color: #fff;
							i{
								color:#000;
							}
						}
					}
				}
			}
		}
		position: fixed;
		top:0;
		left:0;
		right:0;
		display: flex;
		div{
			&.mall_goods_detail_nav_item{
				&.goods_title{
					height:28/@base;
					margin:8/@base 0 0;
					overflow: hidden;
					text-align: center;
					font-size: 22/@base;
					line-height: 35/@base;
				}
				padding:10/@base 0;
				width:70%;
				&:first-child{
					width:15%;
				}
				&:last-child{
					width:15%;
				}
				a{
					display: block;
					color:#000;
					text-align: center;
					&.mall_goods_detail_nav_goback{
						width:50/@base;
						height:50/@base;
						border-radius: 50/@base;
						background-color: rgba(0,0,0,.5);
						margin:0 auto;
						i{
							font-size: 25/@base;
							line-height: 50/@base;
							color:#fff;
						}
					}
					&.mall_goods_detail_nav_cart{
						width:50/@base;
						height:50/@base;
						border-radius: 50/@base;
						background-color: rgba(0,0,0,.5);
						margin:0 auto;
						i{
							font-size: 25/@base;
							line-height: 50/@base;
							color:#fff;
						}
					}
				}
			}
		}
	}
</style>